<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>线下转账</span>
      <div class="right">
      </div>
    </div>
		<div class="kong"></div> -->
		<!-- 上传凭证 -->
		<div class="upload">
			<div class="title">
				<span>上传转账凭证 / 借款凭证</span>
			</div>
			<div class="add">
				<div class="sc">
					<el-upload
  						class="avatar-uploader"
  						action="/api/upload"
  						:data="{token:token,user_id:myid}"
  						:show-file-list="false"
  						:on-success="handleAvatarSuccess"
  						:before-upload="beforeAvatarUpload">
  						<img v-if="imageUrl" :src="imageUrl" class="avatar">
  						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="sc">
					<el-upload
  						class="avatar-uploader"
  						action="/api/upload"
  						:data="{token:token,user_id:myid}"
  						:show-file-list="false"
  						:on-success="handleAvatarSuccess2"
  						:before-upload="beforeAvatarUpload">
  						<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
		</div>
    <div class="list">
			<div class="boxt">
				<div class="info">
					<span>转账银行：</span><input type="text" v-model="bank" placeholder="请输入转账银行名称">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>银行卡号：</span><input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="id_bank_number" maxlength="19" placeholder="请输入转账银行卡号">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><input type="text" v-model="name" placeholder="请输入持卡人姓名">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>转账金额：</span><input type="text" oninput="value=value.replace(/[^\d]/g,'')"  v-model="transfer_amount" placeholder="请输入转账金额">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>银行流水号：</span><input type="text" v-model="bank_flow" placeholder="请输入银行流水号">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>联系电话：</span><input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="phone" placeholder="请输入您的联系电话" maxlength="11">
				</div>
			</div>
			<div class="boxt">
				<div class="info"> 
					<span>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span><input type="text" v-model="remark" placeholder="请输入款项用途">
				</div>
			</div>
			<div class="btn">
				<button class="affirm" @click="submit()">确认</button>
				<button class="cancel" @click="back()">取消</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "banktransfer",
  data() {
    return {
      imageUrl: "",
      imageUrl2: "",
      file1: "", //凭证图片1
      file2: "", //凭证图片2
      bank: "", //银行
      id_bank_number: "", //银行卡号
      name: "", //姓名
      transfer_amount: "", //转账金额
      bank_flow: "", //银行流水账号
      phone: "", //联系电话
      remark: "" //备注
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    //凭证图片上传成功回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.file1 = res.data;
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.file2 = res.data;
    },
    //上传的限制条件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isGif = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG && !isGif) {
        this.$dialog.toast({ mes: "只能是JPG,Png,gif格式!" });
      }
      if (!isLt2M) {
        this.$dialog.toast({ mes: "上传图片不能大于20M" });
      }
      return (isJPG && isLt2M) || isPNG || isGif;
    },
    //提交表单信息
    submit() {
      if(!this.file1){
			this.$dialog.toast({mes:'请上传转账凭证'});
			return
    }
      if(!this.file2){
			this.$dialog.toast({mes:'请上传借款凭证'});
			return
    }
      if(!this.bank){
			this.$dialog.toast({mes:'请输入转账银行'});
			return
    }
      if(!this.id_bank_number){
			this.$dialog.toast({mes:'请输入银行卡号'});
			return
    }
      if(!this.name){
			this.$dialog.toast({mes:'请输入姓名'});
			return
    }
      if(!this.transfer_amount){
			this.$dialog.toast({mes:'请输入银行流水号'});
			return
    }
      if(!this.phone){
			this.$dialog.toast({mes:'请输入联系电话'});
			return
    }
      if(!this.remark){
			this.$dialog.toast({mes:'请输入款项用途'});
			return
    }
    
      let self = this;
      let url = "/api/finance/transfer";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token,
          file1: this.file1,
          file2: this.file2,
          bank: this.bank,
          id_bank_number: this.id_bank_number,
          name: this.name,
          transfer_amount: this.transfer_amount,
          bank_flow: this.bank_flow,
          phone: this.phone,
          remark: this.remark
        },
        function(res) {
          if (res.code == 200) {
            self.$dialog.toast({ mes: res.msg });
            setTimeout(function() {
              self.$router.push("./mine");
            }, 1000);
          }
        }
      );
    }
  },
  created() {
    document.title = "线下转账";
    //获取token和userid
    this.token = localStorage.getItem("mytoken");
    this.myid = localStorage.getItem("myid");
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.03rem;
  position: fixed;
}
.kong {
  width: 100%;
  height: 0.92rem;
}
.upload {
  width: 100%;
  padding: 0.3rem 0.3rem;
  background: #fff;
}
.upload .title {
  width: 100%;
  display: flex;
  align-items: center;
}
.upload span {
  font-size: 0.28rem;
  color: #707070;
}
.upload .add {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 0.2rem;
}
.upload .add .sc {
  width: 35%;
  height: 1.81rem;
  border: 1px dotted #a0a0a0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .upload .add .sc img {
  width: 2.4rem;
  height: 1.8rem;
} */
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.list {
  width: 100%;
  padding: 0 0.3rem;
  background: #fff;
  margin-top: 0.2rem;
}
.list .boxt {
  width: 100%;
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
}
.list .boxt .info {
  width: 100%;
  height: 100%;
  line-height: 1.4rem;
  border-bottom: 1px solid #eee;
}

.list .boxt .info span {
  font-size: 0.28rem;
  color: #707070;
}
.boxt span {
  font-size: 0.28rem;
  color: #333;
}
.boxt input {
  border: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9e9e9e;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #9e9e9e;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9e9e9e;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9e9e9e;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.2rem 0.2rem;
}
.btn .affirm {
  width: 1.18rem;
  height: 0.6rem;
  background: #e63f3f;
  border: none;
  border-radius: 5px;
  font-size: 0.28rem;
  color: #fff;
}
.btn .cancel {
  width: 1.18rem;
  height: 0.6rem;
  background: #e7e6e9;
  border: none;
  border-radius: 5px;
  font-size: 0.28rem;
  color: #adadad;
  margin-left: 0.5rem;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 2.4rem;
  height: 1.8rem;
  display: block;
}
</style>



